import Vue from "vue";
import VueRouter from "vue-router";
import Home from '@/page/Home';
import About from '@/page/About';
import Message from '@/page/Message'
import News from '@/page/News';
import MsgDetail from '@/page/MsgDetail';
import NewsDetail from '@/page/NewsDetail';
// vue-router的使用步骤：
// 1.安装 vue2 vuex@3 vue-router@3
// 2.声明使用
// 3.暴露VueRouter生成一个路由器对象
// 4.mainjs中vm中添加router属性，值为路由器对象

Vue.use(VueRouter)
export default new VueRouter({//路由器对象 
    mode:'history',//默认是hash模式 ，修改模式为history模式
    // routes放一个个路由对象
    routes: [
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'message', // 不可以写/
                    component:Message,
                    children:[
                        {
                            // /:id params传参要占位，不然会被解析成路径
                            path:'msgdetail/:id?',
                            component:MsgDetail,
                            name:'msgdetail',
                            // props的作用 在组件中使用可以简写 方便
                            // props可以写布尔值 对象 函数  写不同作用不用
                            // 写布尔值方式 ： 可以把params参数给到组件的props属性中 (用的较少)
                            // props:true,
                            // 写对象方式 ： 只能给组件一些写死的数据 (基本不用) 
                            // props:{
                            //     a:1,
                            //     b:2,
                            // }
                            // 写函数方式 ： 可以把params参数和query参数给到组件 并且还能给一些写死的数据 (要用也是用函数)
                            props(route){//函数的形参默认可以接收到当前路由对象
                                console.log(route);
                                // return对象的属性就可以给到组件props中
                                return {
                                    id:route.params.id,
                                    content:route.query.content,
                                    a:6,
                                    b:7
                                }
                            },
                        }
                    ]
                },
                {
                    path:'news',
                    component:News,
                    children:[
                        {
                            path:'newsdetail/:id',
                            name:'newsdetail',
                            component:NewsDetail,
                            props(route){
                                return {
                                    id:route.params.id,
                                    title:route.query.title,
                                }
                            }
                        }
                    ]
                },
                {
                    path:'',
                    redirect:'message'// 重定向
                }
            ]
        },
        {
            path:'/about',
            component:About
        },
        {
            path:'/',
            redirect:'/home'  //重定向路由 如果路径是/ 让你强制去到/home
        }
    ]
})